<template>
    <view class="azm-ai-data-list-components h100">
        <scroll-view scroll-y class="h100" @scroll="handleScroll">
            <view class="azm-herder flex align-center">
                <view class="left flex align-center" v-if="userInfo.user_id"
                      @tap.stop="handleTapSelect">
                    <text class="azm-name">{{selectData.name || userInfo.nickname}}</text>
                    <text class="tlIcon-date_extend azm-icon" v-if="userInfo.role < 2"></text>
                </view>
                <scroll-view scroll-x class="flex-sub right azm-tap-btns" v-if="!customize">
                    <view class="flex align-center justify-end">
                        <button hover-class="none"
                                class="cu-btn sm" :class="index === curIndex?'bg-blue':'bg-gray'"
                                v-for="(item,index) in taps" @tap.stop="handleSwitchFilter(index)"
                                :key="item">{{item}}
                        </button>
                    </view>
                </scroll-view>
                <view class="flex align-center justify-end flex-sub azm-customize h100" v-else
                      @tap.stop="handleCalendarSelectDate(2)">
                    <view class="picker flex align-center">
                        <text>{{filterData.start_time | ic_date_format_filter("YYYY-MM-DD")}}</text>
                        <text class="tlIcon-date_extend azm-icon"></text>
                    </view>
                    <text class="azm-margin-left-3 azm-margin-right-8">至</text>
                    <view class="picker flex align-center">
                        <text>{{filterData.end_time | ic_date_format_filter("YYYY-MM-DD")}}</text>
                        <text class="tlIcon-date_extend azm-icon"></text>
                    </view>
                    <view class="h100 flex align-center">
                        <text class="tlIcon-delete azm-close-icon"
                              @tap.stop="handleCloseSelectTime"></text>
                    </view>
                </view>
            </view>
            <!--主体-->
            <view class="azm-main">
                <!--客户数据-->
                <view class="cu-bar bg-white margin-top-xs solid-bottom sm-border">
                    <view class="action azm-bar-title flex align-center"
                          @tap.stop="showCustomerSituationFieldDescriptionAlert">
                        <text>客户数据</text>
                        <text class="tlIcon-doubt azm-bt-icon azm-margin-left-3"></text>
                    </view>
                    <view class="action text-blue flex align-center azm-bar-right"
                          v-if="noDataType === 3 || noDataType === 0"
                          @tap.stop="handleToLoginLink('/pages/report/index')">
                        <text class="azm-br-icon tlIcon-trend azm-margin-right-3"></text>
                        <text>趋势图</text>
                    </view>
                </view>
                <view class="cu-card no-card dynamic">
                    <view v-if="noDataType !== 3 && noDataType !== 0" class="azm-no-data bg-white">
                        <tlNoData v-if="noDataType !== 0" :type="noDataType"></tlNoData>
                    </view>
                    <view class="cu-item shadow" v-else>
                        <view class="azm-m-top flex align-center justify-center">
                            <view class="flex-sub text-center">
                                <p class="azm-mt-1" v-if="curIndex === 0">
                                    <text>较昨日</text>
                                    <text :class="{'text-blue':customerData.today_clue_count !== 0}">
                                        <block v-if="customerData.today_clue_count>0">+</block>
                                        {{customerData.today_clue_count | ic_number_filter}}
                                    </text>
                                </p>
                                <p class="azm-ellipsis--l1 text-bold azm-mt-2">
                                    <text>{{customerData.clue_count | ic_number_filter}}</text>
                                </p>
                                <p class="azm-mt-3">线索客户</p>
                            </view>
                            <view class="flex-sub text-center">
                                <p class="azm-mt-1" v-if="curIndex === 0">
                                    <text>较昨日</text>
                                    <text :class="{'text-blue':customerData.today_customer_count !== 0}">
                                        <block v-if="customerData.today_customer_count>0">+</block>
                                        {{customerData.today_customer_count | ic_number_filter}}
                                    </text>
                                </p>
                                <p class="azm-ellipsis--l1 text-bold azm-mt-2">
                                    <text>{{customerData.customer_count | ic_number_filter}}</text>
                                </p>
                                <p class="azm-mt-3">客户总数</p>
                            </view>
                        </view>
                        <view class="flex align-center azm-m-main azm-margin-top-26">
                            <view class="flex-sub text-center">
                                <p class="azm-mt-1" v-if="curIndex === 0">
                                    <text>较昨日</text>
                                    <text :class="{'text-blue':customerData.today_general_customer_count !== 0}">
                                        <block v-if="customerData.today_general_customer_count>0">+</block>
                                        {{customerData.today_general_customer_count | ic_number_filter}}
                                    </text>
                                </p>
                                <p class="azm-mt-4 azm-ellipsis--l1 text-bold">
                                    <text>{{customerData.general_customer_count | ic_number_filter}}</text>
                                </p>
                                <p class="azm-mt-3">一般客户</p>
                            </view>
                            <view class="flex-sub text-center">
                                <p class="azm-mt-1" v-if="curIndex === 0">
                                    <text>较昨日</text>
                                    <text :class="{'text-blue':customerData.today_important_customer_count !== 0}">
                                        <block v-if="customerData.today_important_customer_count>0">+</block>
                                        {{customerData.today_important_customer_count | ic_number_filter}}
                                    </text>
                                </p>
                                <p class="azm-mt-4 azm-ellipsis--l1 text-bold">
                                    <text>{{customerData.important_customer_count | ic_number_filter}}</text>
                                </p>
                                <p class="azm-mt-3">重要客户</p>
                            </view>
                            <view class="flex-sub text-center">
                                <p class="azm-mt-1" v-if="curIndex === 0">
                                    <text>较昨日</text>
                                    <text :class="{'text-blue':customerData.today_meet_customer_count !== 0}">
                                        <block v-if="customerData.today_meet_customer_count>0">+</block>
                                        {{customerData.today_meet_customer_count |ic_number_filter}}
                                    </text>
                                </p>
                                <p class="azm-mt-4 azm-ellipsis--l1 text-bold">
                                    <text>{{customerData.meet_customer_count | ic_number_filter}}</text>
                                </p>
                                <p class="azm-mt-3">已会面客户</p>
                            </view>
                            <view class="flex-sub text-center text-10">
                                <p class="azm-mt-1" v-if="curIndex === 0">
                                    <text>较昨日</text>
                                    <text :class="{'text-blue':customerData.today_deal_customer_count !== 0}">
                                        <block v-if="customerData.today_deal_customer_count>0">+</block>
                                        {{customerData.today_deal_customer_count | ic_number_filter}}
                                    </text>
                                </p>
                                <p class="azm-mt-4 azm-ellipsis--l1 text-bold">
                                    <text>{{customerData.deal_customer_count | ic_number_filter}}</text>
                                </p>
                                <p class="azm-mt-3">已成交客户</p>
                            </view>
                        </view>
                        <view class="text-right azm-mf-time text-10">
                            <text>数据截至{{customerData.timestamp | ic_date_format_filter('YYYY/MM/DD HH:mm')}}</text>
                        </view>
                    </view>
                </view>

                <!--销售行为记录-->
                <view class="cu-bar bg-white margin-top-xs solid-bottom sm-border">
                    <view class="action azm-bar-title flex align-center"
                          @tap.stop="showDescriptionOfSalesBehaviorFieldAlert">
                        <text>销售行为记录</text>
                        <text class="tlIcon-doubt azm-bt-icon azm-margin-left-3"></text>
                    </view>
                    <view class="action text-blue flex align-center azm-bar-right" v-if="noDataType === 0"
                          @tap.stop="handleToLoginLink('/pages/report/index')">
                        <text class="azm-br-icon tlIcon-trend azm-margin-right-3"></text>
                        <text>趋势图</text>
                    </view>
                </view>
                <view class="cu-card no-card dynamic">
                    <view v-if="noDataType !== 0" class="azm-no-data">
                        <tlNoData v-if="noDataType !== 0" :type="noDataType"></tlNoData>
                    </view>
                    <view class="cu-item shadow" v-else>
                        <view class="azm-chart-box">
                            <TlCharts type="column" :dataList="SalesBehaviorData"
                                      :isHideCanvas="isHideCanvas"></TlCharts>
                        </view>
                        <view class="text-right azm-mf-time text-10">
                            <text>数据截至{{SalesBehaviorDataTimestamp |
                                ic_date_format_filter('YYYY/MM/DD HH:mm')}}
                            </text>
                        </view>
                    </view>
                </view>

                <!--客户行为记录-->
                <view class="cu-bar bg-white margin-top-xs solid-bottom sm-border">
                    <view class="action azm-bar-title flex align-center"
                          @tap.stop="showCustomerBehaviorFieldDescriptionAlert">
                        <text>客户行为记录</text>
                        <text class="tlIcon-doubt azm-bt-icon azm-margin-left-3"></text>
                    </view>
                    <view class="action text-blue flex align-center azm-bar-right" v-if="noDataType === 0"
                          @tap.stop="handleToLoginLink('/pages/report/index')">
                        <text class="azm-br-icon tlIcon-trend azm-margin-right-3"></text>
                        <text>趋势图</text>
                    </view>
                </view>
                <view class="cu-card no-card dynamic">
                    <view v-if="noDataType !== 0" class="azm-no-data">
                        <tlNoData v-if="noDataType !== 0" :type="noDataType"></tlNoData>
                    </view>
                    <view class="cu-item shadow" v-else>
                        <view class="azm-chart-box">
                            <TlCharts type="column" :dataList="CustomerBehaviorRecordStatistics"
                                      :isHideCanvas="isHideCanvas"
                                      :seriesOpts="customerSeries"></TlCharts>
                        </view>
                        <view class="text-right azm-mf-time text-10">
                            <text>数据截至{{CustomerBehaviorRecordStatisticsTimestamp |
                                ic_date_format_filter('YYYY/MM/DD HH:mm')}}
                            </text>
                        </view>
                    </view>
                </view>

                <!--用户画像-->
                <view class="cu-bar bg-white margin-top-xs solid-bottom sm-border">
                    <view class="action azm-bar-title flex align-center">
                        <text>用户画像</text>
                    </view>
                    <!--                    <view class="action text-blue flex align-center azm-bar-right" v-if="noDataType === 0"-->
                    <!--                          @tap.stop="handleToLoginLink('/pages/report/index')">-->
                    <!--                        <text class="azm-br-icon tlIcon-trend azm-margin-right-3"></text>-->
                    <!--                        <text>趋势图</text>-->
                    <!--                    </view>-->
                </view>
                <view class="cu-card no-card dynamic">
                    <view v-if="noDataType !== 0" class="azm-no-data">
                        <tlNoData v-if="noDataType !== 0" :type="noDataType"></tlNoData>
                    </view>
                    <view class="cu-item shadow" v-else>
                        <view class="action azm-card-title">客户性别统计</view>
                        <view class="azm-card-gender-chart">
                            <TlCharts type="ring" :dataList="CustomerGenderStatistics"
                                      :isHideCanvas="isHideCanvas" legend></TlCharts>
                        </view>
                        <view class="action flex flex-sub justify-between">
                            <view class="azm-card-title">城市分布统计</view>
                            <view class="azm-card-action">单位：人</view>
                        </view>
                        <view class="azm-city-chart-box">
                            <TlBarGraph :dataList="CityDistributionStatistics"></TlBarGraph>
                        </view>
                    </view>
                </view>
            </view>
        </scroll-view>
        <!--底部弹出选择-->
        <tl-calendar isFixed :minDate="calendarOpts.minDate" :maxDate="calendarOpts.maxDate"
                     :btnType="calendarOpts.btnType" :activeBgColor="calendarOpts.activeBgColor"
                     :rangeBgColor="calendarOpts.rangeBgColor" dynamic
                     :rangeColor="calendarOpts.rangeColor"
                     :startText="calendarOpts.startText" :endText="calendarOpts.endText"
                     :arrowType="calendarOpts.arrowType" :type="calendarOpts.type"
                     ref="calendar" @confirm="handleCalendarConfirm"
                     @change="handleCalendarChange" @cancel="handleCalendarCancel"></tl-calendar>
    </view>
</template>

<script>
    import { mapState, mapGetters } from 'vuex';
    import DateRangeUtilMixins from '@/mixins/dateRangeUtil'
    import ExplainAlertMixins from '@/mixins/explainAlert'
    import TlCharts from "@/components/tl-ui/charts/index.vue";
    import TlBarGraph from "@/components/tl-ui/charts/barGraph.vue";
    import tlNoData from "@/components/tl-ui/Abnor/no-data.vue";
    import tlCalendar from "@/components/tl-ui/calendar/index.vue";
    import { debounce } from "@u/lodash/throttle";

    export default {
        name: "ai-data-list",
        mixins: [ExplainAlertMixins, DateRangeUtilMixins],
        components: {TlCharts, TlBarGraph, tlNoData, tlCalendar},
        props: {
            bottom: {
                type: Number,
                default: 50
            }
        },
        data () {
            const currentWeek = this.$$$getLastWeek()
            return {
                calendarOpts: {
                    type: 1,
                    status: [],
                    arrowType: 1,
                    minDate: "1920-01-01",
                    maxDate: "",
                    btnType: "blue",
                    activeBgColor: "#0075FF",
                    rangeBgColor: "rgba(0, 117, 255, 0.1)",
                    rangeColor: "#0075FF",
                    startText: "开始",
                    endText: "结束",
                    result: "",
                },
                filterData: {
                    start_time: currentWeek.start_date,
                    end_time: currentWeek.end_date,
                    times: [currentWeek.start_date, currentWeek.end_date]
                },
                customize: false,//切换自定义
                // 下拉刷新的常用配置
                taps: ["累计", "昨天", "本周", "本月", "自定义"],

                curIndex: 0,
                // 客户数据
                customerData: {
                    clue_count: 0,                          // 线索总数
                    customer_count: 0,                      // 客户总数
                    deal_customer_count: 0,                 // 已成交客户
                    general_customer_count: 0,              // 一般客户
                    important_customer_count: 0,            // 重要客户
                    meet_customer_count: 0,                 // 已见面客户
                    today_clue_count: 0,                    // 较昨日线索总数
                    today_customer_count: 0,                // 较昨日客户总数
                    today_deal_customer_count: 0,           // 较昨日已成交客户
                    today_general_customer_count: 0,        // 较昨日一般客户
                    today_important_customer_count: 0,      // 较昨日重要客户
                    today_meet_customer_count: 0,           // 较昨日已见面客户
                    timestamp: ""
                },
                // 销售数据
                SalesBehaviorData: [],
                SalesBehaviorDataTimestamp: "",
                // 客户行为记录
                CustomerBehaviorRecordStatistics: [],
                CustomerBehaviorRecordStatisticsTimestamp: "",
                customerSeries: {
                    color: "#FF9918"
                },
                // 客户性别统计
                CustomerGenderStatistics: [],
                CustomerGenderStatisticsTimestamp: "",
                // 城市分布统计
                CityDistributionStatistics: [],
                CityDistributionStatisticsTimestamp: "",

                isHideCanvas: false,
                // 选择的对象
                selectData: {
                    name: "",
                    id: "",
                    type: 1
                }
            }
        },
        computed: {
            ...mapState({
                userInfo: state => state.System.userInfo
            }),
            ...mapGetters({
                noDataType: 'System/noDataType', //1：登录 2：公司 3：名片
            })
        },
        mounted () {
            this.$nextTick(function () {
                this.handleRefresh()
            })
        },
        methods: {
            async handleRefresh () {
                const userInfo = this.userInfo;
                const item = this.$Storage.getStorageSync('interim-ai-data-save-data')
                if (item && !this.$util.jude.isEmpty(item.id)) {
                    if (item.type === 1) {
                        this.selectData = item
                    } else {
                        this.selectData = item
                    }
                } else {
                    this.selectData = {
                        type: 1,
                        name: userInfo.nickname,
                        id: userInfo.user_id
                    }
                    this.$Storage.setStorageSync('interim-ai-data-save-data', this.selectData)
                }
                await this.loadData();
            },
            async loadData () {
                const self = this;
                const selectData = this.selectData || {};
                this.$loading.show('加载中');
                const result = await this.getCustomerData();
                this.$loading.hide();
                if (result.code === 0) {
                    await this.getSalesRecordStatistics();
                    await this.getCustomerBehaviorStatistics();
                    await this.getCustomerGenderStatistics();
                    await this.getCityDistributionStatistics();
                    await this.updateData();
                } else if (result.code === 6004) {
                    const res = await this.$util.showModalSync({
                        content: `无权查看当前${selectData.type === 1 ? '用户' : "部门"}的报表,将自动切换个人报表。`,
                        showCancel: false,
                        confirmText: "我知道了"
                    })
                    if (res && res.confirm === true) {
                        await this.$Storage.removeStorageSync("interim-ai-data-save-data")
                        await this.handleRefresh()
                    }
                } else {
                    self.handleRequestError(result);
                }
            },

            async updateData () {
				console.log(this.selectData)
                const selectData = this.selectData || {};
                if (!selectData.id) return Promise.resolve();
                if (selectData.type === 1) {
                    const result = await this.$ajax.Organized.getStaffInfo({user_id: selectData.id});
                    if (result.code === 0) {
                        let info = result.data || {}
                        this.selectData = {
                            ...selectData,
                            name: info.nickname,
                            id: info.user_id
                        }
                    } else if(result.code === 7002){ //席位过期 
						console.log('123')
					}else if(result.code === 7002){ //席位不足 
						console.log('456')
					}else{
                        return this.handleRequestError(result)
                    }
                } else {
                    const result = await this.$ajax.Organized.getBranchDetail({id: selectData.id})
                    if (result.code === 0) {
                        let info = result.data || {}
                        this.selectData = {
                            ...selectData,
                            name: info.name,
                            id: info.id
                        }
                    } else {
                        return this.handleRequestError(result)
                    }
                }
                this.$Storage.setStorageSync('interim-ai-data-save-data', this.selectData)
            },
            // 获取客户数据
            async getCustomerData () {
                const self = this;
                const info = await this.getSelectData();
                if (info === false) return Promise.resolve({});
                const result = await this.$ajax.Chart.getCustomerStatistics(info);
                if (result.code === 0) {
                    self.$util.mapKeys(result.data, self.customerData, Object.keys(self.customerData))
                    self.customerData.timestamp = result.data.last_update_time;
                }
                return Promise.resolve(result)
            },
            // 获取销售行为统计
            async getSalesRecordStatistics () {
                const self = this;
                const info = await this.getSelectData();
                if (info === false) return Promise.resolve({});
                return this.$ajax.Chart.getSalesRecordStatistics(info).finally(result => {
                    if (result.code === 0) {
                        self.SalesBehaviorData = !Array.isArray(result.data.data) ? [] : result.data.data.map(val => {
                            return {
                                name: val.name,
                                num: val.value,
                                color: val.color
                            }
                        });
                        self.SalesBehaviorDataTimestamp = result.data.last_update_time;
                    } else {
                        self.handleRequestError(result)
                    }
                })
            },
            // 获取客户行为统计
            async getCustomerBehaviorStatistics () {
                const self = this;
                const info = await this.getSelectData();
                if (info === false) return Promise.resolve({});
                return this.$ajax.Chart.getCustomerBehaviorStatistics(info).finally(result => {
                    if (result.code === 0) {
                        self.CustomerBehaviorRecordStatistics = !Array.isArray(result.data.data) ? [] : result.data.data.map(val => {
                            return {
                                name: val.name,
                                num: val.value,
                                color: val.color
                            }
                        });
                        self.CustomerBehaviorRecordStatisticsTimestamp = result.data.last_update_time
                    } else {
                        self.handleRequestError(result)
                    }
                })
            },
            // 获取城市分布统计
            async getCityDistributionStatistics () {
                const self = this;
                const info = await this.getSelectData();
                if (info === false) return Promise.resolve({});
                return this.$ajax.Chart.getCityDistributionStatistics(info).finally(result => {
                    if (result.code === 0) {
                        self.CityDistributionStatistics = !Array.isArray(result.data.data) ? [] : result.data.data.map(val => {
                            return {
                                name: val.name,
                                num: val.value,
                                color: val.color
                            }
                        });
                        self.CityDistributionStatisticsTimestamp = result.data.last_update_time;
                    } else {
                        self.handleRequestError(result)
                    }
                })
            },
            // 统一错误处理
            handleRequestError: debounce(function (result) {
                const self = this;
                if (!result) return;
                if ([6006, 6001].indexOf(result.code) === -1) {
                    self.$toast.text(result.message)
                }
            }, 1000),
            // 获取客户性别统计
            async getCustomerGenderStatistics () {
                const self = this;
                const info = await this.getSelectData();
                if (info === false) return Promise.resolve({});
                return this.$ajax.Chart.getCustomerGenderStatistics(info).finally(result => {
                    if (result.code === 0) {
                        self.CustomerGenderStatistics = !Array.isArray(result.data.data) ? [] : result.data.data.map(val => {
                            const color = val.name === '男' ? '#10CA5C' : val.name === '女' ? "#FF9918" : "#ECF1EE";
                            return {
                                name: val.name,
                                num: val.value,
                                color: val.color || color
                            }
                        });
                        self.CustomerGenderStatisticsTimestamp = result.data.last_update_time;
                    } else {
                        self.handleRequestError(result)
                    }
                })
            },
            // 获取筛选参数
            getSelectData () {
                let self = this;
                const {dateFormat, getMonthDay, timeForMat} = this.$util
                let {isEmptyObject, isEmpty} = self.$util.jude
                let curIndex = this.curIndex;
                let filterData = this.filterData;
                let end_date = '';
                let start_date = '';
                if (this.customize === true) {
                    end_date = filterData.end_time;
                    start_date = filterData.start_time;
                } else {
                    switch (curIndex) {
                        case 1: // 昨天
                            const Yesterday = this.$$$getYesterday();
                            end_date = Yesterday.end_date
                            start_date = Yesterday.start_date
                            break;
                        case 2:
                            const currentWeek = this.$$$getCurrentWeek();
                            end_date = currentWeek.end_date
                            start_date = currentWeek.start_date
                            break;
                        case 3:
                            const currentMonth = this.$$$getCurrentMonth();
                            end_date = currentMonth.end_date
                            start_date = currentMonth.start_date
                            break;
                        default:
                            end_date = ''
                            start_date = ''
                    }
                }

                let selectData = {type: 1};
                if (self.selectData && !isEmpty(self.selectData.id)) {
                    selectData = {...self.selectData, end_date, start_date}
                } else if (self.userInfo && !isEmpty(self.userInfo.user_id)) {
                    self.selectData = {
                        id: self.userInfo.user_id,
                        name: self.userInfo.nickname,
                        type: 1
                    }
                    selectData = {...self.selectData, end_date, start_date}
                } else {
                    return Promise.resolve(false);
                }
                return Promise.resolve({
                    ...selectData,
                    type: selectData.type === 1 ? "user" : "department",
                });
            },

            handleTapSelect () {
                if (this.userInfo.user_id && this.userInfo.role !== 2) {
                    this.handleToLoginLink({
                        path: "/pages/report/operate/select-staff-branch"
                    })
                }
            },


            // 关闭自定义选择
            handleCloseSelectTime () {
                this.customize = false;
                this.isChangeTime = false;
                if (this.isChangeTime) this.handleRefresh();
                this.$refs.calendar.closeSelect();
            },
            // 切换tabs
            handleSwitchFilter (index) {
                if (this.taps.length - 1 === index) {
                    this.customize = true;
                    this.handleCalendarSelectDate(2);
                } else {
                    this.curIndex = index
                    this.handleRefresh()
                }
            },
            // 滚动监听
            handleScroll () {
                const vm = this;
                vm.isHideCanvas = true;
                if (this.TimerHideCanvas) clearTimeout(this.TimerHideCanvas);
                this.TimerHideCanvas = setTimeout(function () {
                    vm.isHideCanvas = false;
                }, 500)
            },

            /********************** 日历 start ********************/
            handleCalendarSelectDate (type) {
                this.isHideCanvas = true; // 打开时候隐藏图表
                const dateFormat = this.$util.dateFormat;
                const today = dateFormat(Date.now(), "YYYY-MM-DD");
                const calendarOpts = {
                    arrowType: 1,
                    minDate: "1920-01-01",
                    maxDate: "",
                    startText: "开始",
                    endText: "结束",
                };
                switch (type) {
                    case 1:
                        calendarOpts.type = 1
                        break;
                    case 2:
                        calendarOpts.type = 2
                        calendarOpts.minDate = ""
                        calendarOpts.maxDate = today
                        break;
                    case 3:
                        calendarOpts.minDate = "2020-04-01"
                        calendarOpts.maxDate = "2020-06-08"
                        calendarOpts.type = 1
                        break;
                    case 4:
                        calendarOpts.type = 2
                        calendarOpts.btnType = "danger"
                        calendarOpts.activeBgColor = "#EB0909"
                        calendarOpts.rangeBgColor = "rgba(235,9,9,0.1)"
                        calendarOpts.rangeColor = "#EB0909"
                        calendarOpts.arrowType = 1
                        break;
                    case 5:
                        calendarOpts.type = 2
                        calendarOpts.startText = "住店"
                        calendarOpts.endText = "离店"
                        break;
                    case 6:
                        calendarOpts.arrowType = 2
                        break;
                    default:
                        break;
                }
                this.$util.mapKeys(calendarOpts, this.calendarOpts, Object.keys(this.calendarOpts))
                this.$refs.calendar.show()
            },
            handleCalendarChange (e) {
                // const {dateFormat, dateRange, timeForMat, transformDate} = this.$util
                // let endDate = timeForMat(1, e.startDate, "M");
                // endDate = timeForMat(-1, endDate, "D");
                // const flag = +(transformDate(endDate)) < Date.now();
                // if (flag) {
                //     this.calendarOpts.maxDate = dateFormat(endDate, "YYYY-MM-DD")
                // } else {
                //     this.calendarOpts.maxDate = dateFormat(Date.now(), "YYYY-MM-DD")
                // }
            },
            handleCalendarConfirm (e) {
                this.isChangeTime = true; // 是否改变时间
                this.isHideCanvas = false;
                this.calendarOpts.result = `${e.startDate} 至 ${e.endDate}`;
                this.filterData.start_time = e.startDate;
                this.filterData.end_time = e.endDate;
                this.handleRefresh();
            },
            handleCalendarCancel () {
                this.isHideCanvas = false;
                console.log("handleCalendarCancel");
                if (!this.calendarOpts.result) this.customize = false;
            }
            /********************** 日历 end ********************/
        }
    }
</script>

<style scoped lang="scss">
    .azm-ai-data-list-components {
        .azm-herder {
            background: #fff;
            height: 52*2upx;
            padding: 0 15*2upx;

            .azm-name {
                font-size: 13*2upx;
                font-weight: bold;
            }

            .azm-icon {
                font-size: 14*2upx;
                margin-left: 2*2upx;
            }

            .azm-close-icon {
                color: #cbd1d1;
                font-size: 14*2upx;
            }

            .azm-customize {
                font-size: 12*2upx;
            }

            .azm-tap-btns {
                .cu-btn {
                    margin-left: 7*2upx;
                    height: 24*2upx;
                    border-radius: 3*2upx;
                    font-size: 10*2upx;
                    font-weight: 500;
                    padding: 0 7*2upx;

                    &.bg-gray {
                        background: #F6F6F6;
                        color: #B0B6BC;
                    }
                }
            }
        }

        .azm-main {
            .azm-bar-title {
                font-size: 17px;
                font-weight: bold;
            }

            .azm-bt-icon {
                font-size: 16*2upx;
                color: #e3e3e3;
                font-weight: 400;
            }

            .azm-bar-right {
                font-size: 13*2upx;
            }

            .azm-br-icon {
                font-size: 16*2upx;
            }

            .cu-card {
                background: #fff;
                padding: 20*2upx 15*2upx;
            }

            .azm-mt-1 {
                font-size: 10*2upx;
                color: #A2A8A8;
                height: 14*2upx;
                line-height: 14*2upx;
            }

            .azm-mt-2 {
                margin-top: 3*2upx;
                font-size: 30*2upx;
                height: 32*2upx;
                line-height: 32*2upx;
                font-family: DINAlternate-Bold, DINAlternate;
            }

            .azm-mt-3 {
                margin-top: 2*2upx;
                font-size: 11*2upx;
                color: #656B6B;
            }


            .azm-mt-4 {
                margin-top: 4*2upx;
                font-size: 23*2upx;
                height: 22*2upx;
                line-height: 22*2upx;
                font-family: DINAlternate-Bold, DINAlternate;
            }

            .azm-mf-time {
                margin-top: 20*2upx;
                color: #A2A8A8;
                height: 14*2upx;
                line-height: 14*2upx;
                font-size: 10*2upx;
            }

            .azm-m-main .azm-mt-3 {
                margin-top: 4*2upx;
            }

            .azm-card-title {
                font-size: 14*2upx;
                font-weight: bold;
            }

            .azm-card-action {
                color: #A2A8A8;
                font-size: 10*2upx;
            }

            .azm-no-data {
                height: 189*2upx;
            }

            .azm-card-gender-chart {
                height: 520*1upx;
                margin-bottom: 20*2upx;
            }

            .azm-city-chart-box {
                padding: 28*2upx 0 12*2upx;
            }
        }

        .azm-chart-box {
            height: 404*1upx;
        }
    }
</style>
